<template>
  <div class="footer">
    <div class="footer-left">
       <logo class="footer-logo"></logo>
       <p>
         WIT社区是一个自由社交的平台，是为用户提供交流的地方。
         用户可以在这里认识更多志同道合的朋友，发表自己的文章，探讨感兴趣的话题。
         打造丰富多彩的生活！
       </p>
       <p style="font-variant:small-caps; font-size: 16px">
       WIT community is a free social platform and a place for users to communicate.  
       users can meet more like-minded friends here, publish their own articles, and discuss topics of interest.  
       create a colorful life!  
       </p>
       <ul class="footer-shengm">
         <li><a href="JavaScript:;">法律声明</a></li>
         <li><a href="JavaScript:;">隐私协议</a></li>
         <li>联系合作请先联系邮箱：zhoukai_0826@163.com</li>
       </ul>
    </div>
    <div class="footer-right">
      <div class="blogroll">
        <p>友情链接</p>
        <span>网站技术支持：</span>
        <ul>
          <li v-for="(item,index) in support" :key="index">
            <a :href="item.url" target="_blank">{{item.text}}</a>
          </li>
        </ul>
      </div>
      <div class="contact">
        <a :href="item.url" target="_blank" v-for="(item,index) in contact" :key="index">
          <svg class="icon" aria-hidden="true">
            <use :xlink:href="'#' + item.icon"></use>
          </svg>
          <span>{{item.text}}</span>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import Logo from '../header/logo.vue'
export default {
  name: 'Footer',

  data() {
    return {
      support: [
        {text: '阿里图标库', url: 'https://www.iconfont.cn/'},
        {text: 'Vue', url: 'https://cn.vuejs.org/'},
        {text: 'Django', url: 'https://www.djangoproject.com/'},
        {text: 'MySQL', url: 'https://www.mysql.com/'}
      ],
      contact: [
        {text: 'QQ', icon: 'icon-QQ', url: 'JavaScript:;'},
        {text: '微信', icon: 'icon-weixin-5', url: 'JavaScript:;'},
        {text: '邮箱', icon: 'icon-youxiang', url: 'JavaScript:;'}
      ]
    };
  },

  mounted() {
    
  },

  methods: {
    
  },

  components: {
    Logo
  }
};
</script>

<style scoped>
.footer{
  width: 100%;
  background-color: #ececec;
  margin-top: 40px;
  display: flex;
}
.footer a,p,span,li{
  color: gray;
  font-size: 12px;
}
.footer-logo{
  transform-origin: left center;
  transform: scale(0.8);
}
.footer-left{
  width: 50%;
}
.footer-left p{
  text-indent: 2em;
  text-align: center;
  margin-top: 10px;
}
.footer-shengm{
  display: flex;
  flex-wrap: wrap;
}
.footer-shengm li{
  margin: 20px;
}
.footer-right{
  padding: 20px;
}
.blogroll p{
  font-size: 20px;
}
.blogroll span{
  display: inline-block;
  font-size: 14px;
  margin-top: 10px;
}
.blogroll ul{
  display: inline-block;
}
.blogroll ul li{
  display: inline-block;
  margin: 10px 10px;
}
.blogroll ul a:hover,.footer-shengm li a:hover{
  color: #000;
}
.contact .icon{
  font-size: 30px;
}
.contact a{
  display: inline-block;
  margin: 30px 10px;
}
.contact a:hover span{
  color: #000;
}
@media screen and (max-width:800px) {
 .footer{
   flex-direction: column;
 }
 .footer-left{
   width: 100%;
 }
}
</style>